
<template>
  <div>
  <div id="main" style="width: 50vw; height: 50vh">
  </div>
  <div>
    <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
   
      prop="date"
      label="今日推荐课程"
      width="180"            
      header-align="center"
      align="center">
    </el-table-column>
    <el-table-column
      prop="name"
      label="教师名称"
      width="180"
      header-align="center"
            align="center">
    </el-table-column>
    <el-table-column
      prop="address"
      label="课程类型"
      header-align="center"
            align="center">
    </el-table-column>
    <el-table-column
      prop="teache"
      label="课程名称"
      header-align="center"
            align="center">
    </el-table-column>
    <el-table-column
      prop="teacher"
      label="课程简述"
      width="180"
      header-align="center"
            align="center">
    </el-table-column>
    <el-table-column
      prop="teachers"
      label="课程优势"
      width="180"            header-align="center"
            align="center">
    </el-table-column>
  </el-table>
  </div>
</div>


  
</template>

<script>
import * as echarts from "echarts";
var option;
// prettier-ignore
const data = [["趣味语文", 116], ["篮球比赛", 129], ["趣味历史", 135], ["体育课", 86], ["java开发", 73], ["小磊体育", 85]];
const dateList = data.map(function (item) {
  return item[0];
});
const valueList = data.map(function (item) {
  return item[1];
});
const valueList1 = data.map(function (item) {
  return item[1] - 10;
});
option = {
  // Make gradient line here

  title: [
    {
      left: "center",
      text: "课程综合优势",
    },
    {
      top: "55%",
      left: "center",
      text: "学生喜爱程度",
    },
  ],
  tooltip: {
    trigger: "axis",
  },
  xAxis: [
    {
      data: dateList,
      alignTicks: true,
      splitLine: {
        show: true,
      },
      minorSplitLine: {
        show: true,
      },
      boundaryGap: false,
    },
    {
      data: dateList,
      gridIndex: 1,
      minorTick: {
        show: true,
      },
    },
  ],
  yAxis: [
    {
      splitLine: {
        show: true,
      },
    },
    {
      gridIndex: 1,
    },
  ],
  grid: [
    {
      bottom: "60%",
    },
    {
      top: "60%",
    },
  ],
  series: [
    {
      type: "line",
      showSymbol: false,
      stack: "Total",
      data: valueList,
    },
    {
      type: "line",
      showSymbol: false,
      stack: "main",
      data: valueList1,
    },
    {
      type: "line",
      showSymbol: false,
      data: valueList,
      xAxisIndex: 1,
      yAxisIndex: 1,
    },
  ],
};

export default {
  name: "test",
  data() {
    return {
      tableData: [{
          date: '1',
          name: '秦枫',
          address: ' 历史',
          teache: '趣味历史',
          teacher: '在历史的长河中品味汉文化的博大精深',
          teachers: '老师会讲三国哦'
        }, {
          date: '2',
          name: '王磊',
          address: '体育',
          teache: '小磊体育',
          teacher: '是兄弟就来撸铁',
          teachers: '嘎嘎锻炼嘎嘎猛，小磊体育，你值得期待'
        }, {
          date: '3',
          name: '蒋一铭',
          address: '篮球',
          teache: '篮球比赛',
          teacher: '纯纯NBA级别的对抗赛',
          teachers: 'what can i say'
        }, {
          date: '4',
          name: '游小钰',
          address: 'java开发',
          teache: '三年java五年外卖',
          teacher: '知道神舟七号么，知道马达加斯加的企鹅么，是的和java都没关系',
          teachers: '一起送外卖'
        }],
    };
  },
  methods: {
    setOption() {
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      myChart.setOption(option);
    },
  },
  mounted() {
    this.setOption();
  },
};
</script> 
